// src/pages/FundDetails.jsx
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Card,
  Row,
  Col,
  Tag,
  Button,
  Descriptions,
  Divider,
  Skeleton,
  Result,
  message,
  Space
} from 'antd';
import FundsrecoverymanagementService from '../../services/FundsrecoverymanagementService';
import moment from 'moment';

const FundDetails = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [fundDetails, setFundDetails] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchFundDetails = async () => {
      try {
        setLoading(true);
        const response = await FundsrecoverymanagementService.getFundsrecoverymanagementById(id);

        if (response.data) {
          setFundDetails(response.data);
        } else {
          setError('未找到回款记录信息');
        }
      } catch (error) {
        console.error('获取回款详情失败:', error);
        setError('加载回款详情失败，请稍后再试');
        message.error('加载详情失败');
      } finally {
        setLoading(false);
      }
    };

    fetchFundDetails();
  }, [id]);

  // 审批状态标签颜色映射
  const approvalStatusColor = {
    '已通过': 'green',
    '待审批': 'blue',
    '被否决': 'red',
    '被驳回': 'orange',
    '已撤销': 'gray'
  };

  // 逾期状态标签颜色映射
  const overdueStatusColor = {
    '已逾期': 'red',
    '未逾期': 'green'
  };

  // 格式化日期
  const formatDate = (dateString) => {
    return dateString ? moment(dateString).format('YYYY-MM-DD') : '-';
  };

  // 格式化日期时间
  const formatDateTime = (dateString) => {
    return dateString ? moment(dateString).format('YYYY-MM-DD HH:mm:ss') : '-';
  };

  // 格式化金额
  const formatAmount = (amount) => {
    return amount ? `¥${parseFloat(amount).toFixed(2)}` : '-';
  };

  if (loading) {
    return (
      <Card title="回款记录详情" bordered={false} style={{ margin: 20 }}>
        <Skeleton active paragraph={{ rows: 10 }} />
      </Card>
    );
  }

  if (error) {
    return (
      <Card title="回款记录详情" bordered={false} style={{ margin: 20 }}>
        <Result
          status="error"
          title="加载详情失败"
          subTitle={error}
          extra={
            <Button type="primary" onClick={() => navigate('/fundsrecoverymanagement')}>
              返回列表
            </Button>
          }
        />
      </Card>
    );
  }

  if (!fundDetails) {
    return (
      <Card title="回款记录详情" bordered={false} style={{ margin: 20 }}>
        <Result
          status="404"
          title="数据为空"
          subTitle="未找到回款记录信息"
          extra={
            <Button type="primary" onClick={() => navigate('/fundsrecoverymanagement')}>
              返回列表
            </Button>
          }
        />
      </Card>
    );
  }

  return (
    <Card
      title="回款记录详情"
      bordered={false}
      style={{ margin: 20 }}
      extra={
        <Space>
          <Button
            type="primary"
            onClick={() => navigate(`/fundsrecoverymanagement/updatefunds/${id}`)}
            style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
          >
            更新记录
          </Button>
          <Button onClick={() => navigate('/fundsrecoverymanagement')}>
            返回列表
          </Button>
        </Space>
      }
    >
      {/* 基本信息部分 */}
      <Card
        title="基本信息"
        bordered={false}
        style={{ marginBottom: 24 }}
        headStyle={{ backgroundColor: '#f0f2f5', fontWeight: 'bold' }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="系统编号">
                {fundDetails.systemNumber || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="关联客户">
                {fundDetails.relatedCustomer || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="关联订单">
                {fundDetails.relatedOrder || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="回款金额">
                {formatAmount(fundDetails.paymentAmount)}
              </Descriptions.Item>
            </Descriptions>
          </Col>

          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="国家日期">
                {formatDate(fundDetails.countryDate)}
              </Descriptions.Item>
              <Descriptions.Item label="回款频次">
                {fundDetails.paymentFrequency || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="回款计划">
                {fundDetails.paymentPlan || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="付款方式">
                {fundDetails.paymentMethod || '-'}
              </Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Row gutter={24}>
          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="回款类型">
                {fundDetails.paymentType || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="收款人员">
                {fundDetails.collectionPerson || '-'}
              </Descriptions.Item>
            </Descriptions>
          </Col>

          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="逾期状态">
                {fundDetails.overdueStatus ? (
                  <Tag color={overdueStatusColor[fundDetails.overdueStatus] || 'default'}>
                    {fundDetails.overdueStatus}
                  </Tag>
                ) : '-'}
              </Descriptions.Item>
              <Descriptions.Item label="逾期天数">
                {fundDetails.overdueDays || 0} 天
              </Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>
      </Card>

      {/* 审批信息部分 */}
      <Card
        title="审批信息"
        bordered={false}
        headStyle={{ backgroundColor: '#f0f2f5', fontWeight: 'bold' }}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="审批状态">
                {fundDetails.approvalStatus ? (
                  <Tag color={approvalStatusColor[fundDetails.approvalStatus] || 'default'}>
                    {fundDetails.approvalStatus}
                  </Tag>
                ) : '-'}
              </Descriptions.Item>
              <Descriptions.Item label="提交人员">
                {fundDetails.submitter || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="审批人员">
                {fundDetails.approver || '-'}
              </Descriptions.Item>
            </Descriptions>
          </Col>

          <Col span={12}>
            <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
              <Descriptions.Item label="通知地点">
                {fundDetails.notificationRecipients || '-'}
              </Descriptions.Item>
              <Descriptions.Item label="提交时间">
                {formatDateTime(fundDetails.submissionTime)}
              </Descriptions.Item>
              <Descriptions.Item label="审批时间">
                {formatDateTime(fundDetails.approvalTime)}
              </Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>

        <Divider style={{ margin: '16px 0' }} />

        <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }}>
          <Descriptions.Item label="备注信息">
            {fundDetails.remarks || '无备注'}
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <div style={{ marginTop: 24, textAlign: 'center' }}>
        <Button
          type="primary"
          onClick={() => navigate(`/fundsrecoverymanagement/updatefunds/${id}`)}
          style={{ marginRight: 16 }}
        >
          更新记录
        </Button>
        <Button onClick={() => navigate('/fundsrecoverymanagement')}>
          返回列表
        </Button>
      </div>
    </Card>
  );
};

export default FundDetails;